<template>
  <div id="NewsInformation">
    <div class="container">
      <div class="container text-center">
        <h3>新闻动态</h3>
        <p style="color: #b2b2b2">News and Trends</p>
      </div>
      <div class="nav container text-center">
        <a
          href="#"
          :class="nav == 'news' ? 'active' : ''"
          @click="() => switchNav('news')"
          >宠物新闻</a
        >
        <a
          href="#"
          :class="nav == 'company' ? 'active' : ''"
          @click="() => switchNav('company')"
          >公司动态</a
        >
      </div>
      <div class="news-container" v-if="nav == 'news'">
        <div class="news-card" v-for="item in newsList" :key="item.id">
          <div class="img-box">
            <img :src="getImg(item.cover)" alt="" />
          </div>
          <div class="text-box">
            <h3 class="title">{{ item.title }}</h3>
            <p class="auth">{{ item.auth }}</p>
            <p class="content">{{ item.content }}</p>
            <p class="date">
              {{ dayjs(item.createdDate).format("YYYY-MM-DD HH:mm:ss") }}
            </p>
          </div>
        </div>
      </div>
      <div class="company-container" v-else>
        <ul class="news-container container-fuild">
          <li
            v-for="(item, index) in companyList"
            :key="index"
            class="wow fadeIn"
          >
            <div class="content">
              <p>{{ item.title }}</p>
              <p>{{ item.content }}</p>
            </div>
            <div class="time">
              <p>{{ item.date }}</p>
              <span>{{ item.year }}</span>
            </div>
            <div class="circle">
              <img src="../assets/img/circle.png" />
              <i class="line center-block"></i>
            </div>
          </li>
        </ul>
        <div class="contaianer-fuild text-center more">
          <i class="glyphicon glyphicon-th"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { WOW } from "wowjs";
import { getAction } from "../util/basic";
import dayjs from "dayjs";
export default {
  name: "NewsInformation",
  data() {
    return {
      nav: "news",
      newsList: [],
      url: {
        news: "/news/list",
        company: "/company/list",
      },
      companyList: [
        {
          id: "001",
          title: "公司上市了",
          content:
            "公司里程碑公司里程碑公司里程碑公司里程碑公司里程碑公司里程碑公司里程碑",
          date: "05-24",
          year: "2019",
        },
        {
          id: "002",
          title: "公司里程碑",
          content:
            "公司里程碑公司里程碑公司里程碑公司里程碑公司里程碑公司里程碑公司里程碑",
          date: "05-24",
          year: "2019",
        },
        {
          id: "003",
          title: "公司里程碑",
          content:
            "公司里程碑公司里程碑公司里程碑公司里程碑公司里程碑公司里程碑公司里程碑",
          date: "05-24",
          year: "2019",
        },
        {
          id: "004",
          title: "公司里程碑",
          content:
            "公司里程碑公司里程碑公司里程碑公司里程碑公司里程碑公司里程碑公司里程碑",
          date: "05-24",
          year: "2019",
        },
        {
          id: "005",
          title: "公司里程碑",
          content:
            "公司里程碑公司里程碑公司里程碑公司里程碑公司里程碑公司里程碑公司里程碑",
          date: "05-24",
          year: "2019",
        },
        {
          id: "006",
          title: "公司成立",
          content: "公司成立公司成立公司成立公司成立公司成立",
          date: "05-24",
          year: "2019",
        },
      ],
    };
  },
  mounted() {
    var wow = new WOW();
    wow.init();
    this.initNews();
    this.initCompany();
  },
  methods: {
    dayjs,
    initNews() {
      getAction(this.url.news).then((res) => {
        if (res.success) {
          this.newsList = res.result;
        }
      });
    },
    initCompany() {
      getAction(this.url.company).then((res) => {
        if (res.success) {
          for (const item of res.result) {
            item.date = dayjs(item.eventDate).format("MM-DD");
            item.year = dayjs(item.eventDate).year();
          }
          console.log(`res.result`, res.result);
          this.companyList = res.result;
        }
      });
    },
    // formatFileJson(arr) {
    //   if (arr.length > 0) {
    //     for (const item of arr) {
    //       if (item.cover) {
    //         item.cover = JSON.parse(item.cover);
    //       }
    //     }
    //     return arr;
    //   }
    //   return [];
    // },
    getImg(cover) {
      let url = "";
      if (cover) {
        url = JSON.parse(cover)[0].absolute_path;
      }
      return url;
    },
    switchNav(type) {
      this.nav = type;
    },
  },
};
</script>
<style scoped>
.nav {
  margin: 20px 0;
}
.nav > a {
  display: inline-block;
  text-decoration: none;
  width: 120px;
  height: 45px;
  line-height: 45px;
  color: #333;
  border: 1px solid #333;
}
.nav > a.active {
  color: #1e73be;
  border-color: #1e73be;
}
.nav > a:hover {
  color: #1e73be;
  border-color: #1e73be;
}
.news-container {
  overflow: hidden;
  margin-bottom: 0;
}
.news-container > li {
  width: 55.6%;
  height: 120px;
  float: left;
  color: #333;
  text-align: right;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}
.news-container > li:hover {
  color: #1e73be;
  border: 1px solid #1e73be;
  cursor: pointer;
}
.news-container > li:nth-of-type(2n) {
  float: right;
  text-align: left;
}
.news-container > li > .content {
  width: 60%;
  float: left;
  padding: 20px 0;
}
.news-container > li > .time {
  width: 20%;
  float: left;
  padding: 10px 0;
}
.news-container > li > .time > p {
  font-size: 30px;
  margin: 5px 0;
}
.news-container > li > .circle {
  width: 20%;
  height: 100%;
  float: left;
  position: relative;
}
.news-container > li > .circle > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 20px;
  height: 20px;
}
.news-container > li > .circle > i {
  display: block;
  width: 1px;
  height: 100%;
  background: #707070;
}
.news-container > li:nth-of-type(2n) > .content {
  float: right;
}
.news-container > li:nth-of-type(2n) > .time {
  float: right;
}
.news-container > li:nth-of-type(2n) > .circle {
  float: right;
}
.news-container > li:nth-of-type(1) > .circle > i {
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
}
.more {
  font-size: 25px;
  color: #707070;
}
.more > i {
  cursor: pointer;
}

.news-card {
  padding: 20px;
  border: 1px solid;
  display: flex;
  align-content: center;
  align-self: center;
  margin-bottom: 30px;
  color: rgb(102, 102, 102);
  border-color: rgb(204, 204, 204);
}
.news-card:hover {
 
  border: 1px solid #1e73be;
  cursor: pointer;
}
.news-card:hover h3{ 
 color: #1e73be;
}
.news-card .img-box {
  margin-right: 50px;
}
.news-card .img-box img {
  width: 200px;
  height: 160px;
}
.news-card .content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
@media screen and (max-width: 767px) {
  .news-container > li {
    width: 100%;
  }
  .news-container > li > .content {
    width: 70%;
    text-align: left;
    float: right;
  }
  .news-container > li > .time {
    width: 30%;
    text-align: left;
    float: right;
  }
  .news-container > li > .circle {
    display: none;
  }
}
</style>

